<template>
  <div class="container">
    <!-- 编辑器菜单区域 -->
    <div class="menu">
      <div class="menu-group">
        <button class="toolbar-btn bold-btn" data-tooltip="加粗">
          <svg viewBox="0 0 24 24" width="20" height="20">
            <path d="M7 5h6a3 3 0 0 1 0 6H7zm0 6h7a3 3 0 0 1 0 6H7z" fill="none" stroke="currentColor"
                  stroke-width="2"/>
          </svg>
        </button>
        <button class="toolbar-btn italic-btn" data-tooltip="斜体">
          <svg viewBox="0 0 24 24" width="20" height="20">
            <line x1="10" y1="5" x2="14" y2="5" stroke="currentColor" stroke-width="2"/>
            <line x1="10" y1="19" x2="14" y2="19" stroke="currentColor" stroke-width="2"/>
            <line x1="12" y1="5" x2="12" y2="19" stroke="currentColor" stroke-width="2"/>
          </svg>
        </button>
        <button class="toolbar-btn underline-btn" data-tooltip="下划线">
          <svg viewBox="0 0 24 24" width="20" height="20">
            <path d="M7 5v6a5 5 0 0 0 10 0V5" fill="none" stroke="currentColor" stroke-width="2"/>
            <line x1="5" y1="21" x2="19" y2="21" stroke="currentColor" stroke-width="2"/>
          </svg>
        </button>
      </div>
      <div class="menu-group">
        <button class="toolbar-btn undo-btn" data-tooltip="撤销">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M9 14l-4-4 4-4"/>
            <path d="M5 10h7a4 4 0 1 1 0 8h-1"/>
          </svg>
        </button>
        <button class="toolbar-btn redo-btn" data-tooltip="重做">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M15 10l4 4-4 4"/>
            <path d="M19 14h-7a4 4 0 1 1 0-8h1"/>
          </svg>
        </button>
      </div>
      <div class="menu-group">
        <select class="toolbar-btn font-selector" data-tooltip="选择字体">
          <optgroup label="常用字体"></optgroup>
          <option value="宋体" class="font-songti">宋体</option>
          <option value="黑体" class="font-heiti">黑体</option>
          <option value="楷体" class="font-kaiti">楷体</option>
          <option value="楷体_GB2312" class="font-warning">楷体_GB2312</option>
          <option value="仿宋" class="font-songti">仿宋</option>
          <option value="仿宋_GB2312" class="font-warning">仿宋_GB2312</option>
          <option value="微软雅黑" class="font-yahei">微软雅黑</option>
          <option value="Arial" class="font-arial">Arial</option>
          <option value="Times New Roman" class="font-times">Times New Roman</option>
          <option value="Verdana" class="font-verdana">Verdana</option>
        </select>
        <select class="toolbar-btn size-selector" data-tooltip="选择字号">
          <optgroup label="常用字号"></optgroup>
          <option value="12" class="size-12">12px</option>
          <option value="14" class="size-14">14px</option>
          <option value="16" class="size-16">16px</option>
          <option value="18" class="size-18">18px</option>
          <option value="24" class="size-24">24px</option>
          <option value="32" class="size-32">32px</option>
        </select>
      </div>
      <div class="menu-group">
        <button class="toolbar-btn align-left-btn" data-tooltip="文字左对齐">
          <svg viewBox="0 0 24 24" width="20" height="20">
            <rect x="4" y="6" width="16" height="2" rx="1" fill="currentColor"/>
            <rect x="4" y="10" width="10" height="2" rx="1" fill="currentColor"/>
            <rect x="4" y="14" width="16" height="2" rx="1" fill="currentColor"/>
            <rect x="4" y="18" width="10" height="2" rx="1" fill="currentColor"/>
          </svg>
        </button>
        <button class="toolbar-btn align-center-btn" data-tooltip="文字居中">
          <svg viewBox="0 0 24 24" width="20" height="20">
            <rect x="4" y="6" width="16" height="2" rx="1" fill="currentColor"/>
            <rect x="7" y="10" width="10" height="2" rx="1" fill="currentColor"/>
            <rect x="4" y="14" width="16" height="2" rx="1" fill="currentColor"/>
            <rect x="7" y="18" width="10" height="2" rx="1" fill="currentColor"/>
          </svg>
        </button>
        <button class="toolbar-btn align-right-btn" data-tooltip="文字右对齐">
          <svg viewBox="0 0 24 24" width="20" height="20">
            <rect x="4" y="6" width="16" height="2" rx="1" fill="currentColor"/>
            <rect x="10" y="10" width="10" height="2" rx="1" fill="currentColor"/>
            <rect x="4" y="14" width="16" height="2" rx="1" fill="currentColor"/>
            <rect x="10" y="18" width="10" height="2" rx="1" fill="currentColor"/>
          </svg>
        </button>
      </div>
      <div class="menu-group">
        <button class="toolbar-btn clear-format-btn" data-tooltip="清除格式">
          <svg viewBox="0 0 24 24" width="20" height="20">
            <path d="M6 6l12 12M6 18L18 6" stroke="currentColor" stroke-width="2"/>
          </svg>
        </button>
        <button class="toolbar-btn divider-btn" data-tooltip="插入分割线">
          <svg viewBox="0 0 24 24" width="20" height="20">
            <line x1="4" y1="12" x2="20" y2="12" stroke="currentColor" stroke-width="2"/>
          </svg>
        </button>
      </div>
    </div>

    <!-- 编辑器主体区域 -->
    <div class="editor"></div>

    <!-- 页脚区域 -->
    <div class="footer-bar">
      <div class="footer-left">
        可见页码：{{ footerData.visiblePage }}　页面：{{ footerData.visiblePage }}/{{
          footerData.totalPage
        }}　字数：{{ footerData.wordCount }}　行：{{ footerData.row }}　列：{{ footerData.col }}
      </div>
      <div class="footer-center" @click="changeMode">
        {{ footerData.mode }}
      </div>
      <div class="footer-right">

        <div class="zoom-controls">
          <button class="footer-btn" data-tooltip="缩小">
            <svg width="18" height="18" viewBox="0 0 24 24">
              <path d="M19 13H5v-2h14v2z" fill="#888"/>
            </svg>
          </button>
          <span style="margin:0 2px;">{{ footerData.zoom }}%</span>
          <button class="footer-btn" data-tooltip="放大">
            <svg width="18" height="18" viewBox="0 0 24 24">
              <path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="#888"/>
            </svg>
          </button>
        </div>
        <div class="footer-dropdown-wrap" @click.stop="togglePaperDropdown">
          <button class="footer-btn" data-tooltip="纸张方向">
            <svg width="18" height="18" viewBox="0 0 24 24">
              <rect x="4" y="6" width="16" height="12" rx="2" fill="none" stroke="#888" stroke-width="1.5"/>
              <path d="M12 6v12" stroke="#888" stroke-width="1.5"/>
            </svg>
          </button>
          <div v-if="showPaperDropdown" class="footer-dropdown-menu">
            <div class="footer-dropdown-item" :class="{active: footerData.orientation==='vertical'}"
                 @click.stop="setPaperDirection('vertical')">纵向
            </div>
            <div class="footer-dropdown-item" :class="{active: footerData.orientation==='horizontal'}"
                 @click.stop="setPaperDirection('horizontal')">横向
            </div>
          </div>
        </div>
        <button class="footer-btn" data-tooltip="页边距">
          <svg width="18" height="18" viewBox="0 0 24 24">
            <rect x="5" y="5" width="14" height="14" rx="2" fill="none" stroke="#888" stroke-width="1.5"/>
            <line x1="5" y1="9" x2="19" y2="9" stroke="#888" stroke-width="1.2"/>
            <line x1="5" y1="15" x2="19" y2="15" stroke="#888" stroke-width="1.2"/>
          </svg>
        </button>
        <button class="footer-btn" data-tooltip="全屏">
          <svg width="18" height="18" viewBox="0 0 24 24">
            <path d="M4 4h7V2H2v9h2V4zm16 0v7h2V2h-9v2h7zm0 16h-7v2h9v-9h-2v7zM4 20v-7H2v9h9v-2H4z" fill="#888"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
  <el-dialog v-model="showMarginDialog" title="页边距" width="400px" :close-on-click-modal="false" center>
    <el-form :model="marginForm" label-width="70px" label-position="left" :rules="marginRules" ref="marginFormRef">
      <el-form-item label="上边距" prop="top" required>
        <el-input v-model.number="marginForm.top" type="number" min="0" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="下边距" prop="bottom" required>
        <el-input v-model.number="marginForm.bottom" type="number" min="0" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="左边距" prop="left" required>
        <el-input v-model.number="marginForm.left" type="number" min="0" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="右边距" prop="right" required>
        <el-input v-model.number="marginForm.right" type="number" min="0" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="showMarginDialog=false">取消</el-button>
      <el-button type="primary" @click="onMarginConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import Editor from '@hufe921/canvas-editor'
import barcode1DPlugin from "@hufe921/canvas-editor-plugin-barcode1d"
import barcode2DPlugin from "@hufe921/canvas-editor-plugin-barcode2d"
import codeblockPlugin from "@hufe921/canvas-editor-plugin-codeblock"
import docxPlugin from '@hufe921/canvas-editor-plugin-docx'
import floatingToolbarPlugin from '@hufe921/canvas-editor-plugin-floating-toolbar'
import {onMounted, ref, reactive, onBeforeUnmount, watch} from 'vue'
import {ElMessage} from 'element-plus'

var editor;
const editorInstance = ref(null);
const showPaperDropdown = ref(false)
const showMarginDialog = ref(false)
const marginForm = reactive({
  top: 100,
  bottom: 100,
  left: 120,
  right: 120
})
const marginFormRef = ref()
const marginRules = {
  top: [{required: true, message: '请输入上边距', trigger: 'blur'}],
  bottom: [{required: true, message: '请输入下边距', trigger: 'blur'}],
  left: [{required: true, message: '请输入左边距', trigger: 'blur'}],
  right: [{required: true, message: '请输入右边距', trigger: 'blur'}]
}
// 编辑器模式
const modeMap = {
  'edit': '编辑',
  'print': '打印',
  // 'clean': '清洁',
  // 'readonly': '只读',
  // 'form': '表单',
  // 'design': '设计'
};

// 当前模式
const currentMode = reactive({
  index: 0,
  mode: 'edit',
  modeName: '编辑'
})

// 页脚数据
const footerData = reactive({
  visiblePage: 1,
  totalPage: 1,
  wordCount: 0,
  row: 1,
  col: 1,
  zoom: 100,
  mode: currentMode.modeName,
  orientation: 'vertical', // horizontal 横向/vertical 纵向
  margin: '默认'
})

// 模式切换
const changeMode = () => {
  // 获取所有模式键的数组
  const modeKeys = Object.keys(modeMap);

  // 计算下一个索引（循环）
  currentMode.index = (currentMode.index + 1) % modeKeys.length;

  // 更新当前模式
  const nextMode = modeKeys[currentMode.index];
  currentMode.mode = nextMode;
  currentMode.modeName = modeMap[nextMode];

  footerData.mode = currentMode.modeName;
  editor.command.executeMode(currentMode.mode);
}

function togglePaperDropdown() {
  showPaperDropdown.value = !showPaperDropdown.value
}

function setPaperDirection(dir) {
  footerData.orientation = dir
  showPaperDropdown.value = false
  if (editorInstance.value && editorInstance.value.command) {
    editorInstance.value.command.executePaperDirection(dir)
  }
}

function handleClickOutside(e) {
  if (showPaperDropdown.value) {
    showPaperDropdown.value = false
  }
}

// 纸张方向切换
function onPaperDirectionChange(e) {
  editorInstance.value.command.executePaperDirection(footerData.orientation)
}

// 初始化菜单
const initMenu = (editor) => {
  // 加粗
  document.querySelector('.bold-btn').onclick = () => editor.command.executeBold();
  // 斜体
  document.querySelector('.italic-btn').onclick = () => editor.command.executeItalic();
  // 下划线
  document.querySelector('.underline-btn').onclick = () => editor.command.executeUnderline();
  // 撤销
  document.querySelector('.undo-btn').onclick = () => editor.command.executeUndo();
  // 重做
  document.querySelector('.redo-btn').onclick = () => editor.command.executeRedo();
  // 字体
  document.querySelector('.font-selector').onchange = (e) => editor.command.executeFont(e.target.value);
  // 字号
  document.querySelector('.size-selector').onchange = (e) => editor.command.executeSize(Number(e.target.value));
  // 左对齐
  document.querySelector('.align-left-btn').onclick = () => editor.command.executeRowFlex('left');
  // 居中
  document.querySelector('.align-center-btn').onclick = () => editor.command.executeRowFlex('center');
  // 右对齐
  document.querySelector('.align-right-btn').onclick = () => editor.command.executeRowFlex('right');
  // 清除格式
  document.querySelector('.clear-format-btn').onclick = () => editor.command.executeFormat();
  // 插入分割线
  document.querySelector('.divider-btn').onclick = () => editor.command.executeSeparator();
}

// 初始化页脚及功能
const initFooter = (editor) => {
  // 缩小
  document.querySelector('.footer-btn[data-tooltip="缩小"]').onclick = () => {
    editor.command.executePageScaleMinus()
    footerData.zoom = footerData.zoom - 10
  }
  // 放大
  document.querySelector('.footer-btn[data-tooltip="放大"]').onclick = () => {
    editor.command.executePageScaleAdd()
    footerData.zoom = footerData.zoom + 10
  }
  // 全屏
  document.querySelector('.footer-btn[data-tooltip="全屏"]').onclick = () => {
    const el = document.documentElement
    if (!document.fullscreenElement) {
      el.requestFullscreen && el.requestFullscreen()
    } else {
      document.exitFullscreen && document.exitFullscreen()
    }
  }
  // 页边距
  document.querySelector('.footer-btn[data-tooltip="页边距"]').onclick = () => {
    showMarginDialog.value = true
  }
}

// 页边距确认
function onMarginConfirm() {
  marginFormRef.value.validate((valid) => {
    if (!valid) return
    showMarginDialog.value = false
    if (editorInstance.value && editorInstance.value.command) {
      editorInstance.value.command.executeSetPaperMargin([
        marginForm.top,
        marginForm.right,
        marginForm.bottom,
        marginForm.left
      ])
      ElMessage.success('页边距设置成功！')
    }
  })
}
// 初始化编辑器
const initEditor = () => {
  const container = document.querySelector('.container .editor')
  editor = new Editor(container, {
    // 初始内容配置
    header: [
      {
        value: '标题',
        size: 32,
        rowFlex: 'center'
      }
    ],
    main: [],
    footer: [
      {
        value: '故事电影',
        size: 12,
        rowFlex: 'left'
      }
    ],

  }, {
    // 配置模式
    mode: currentMode.mode,
    // 编辑器选项
    margins: [100, 120, 100, 120],
    watermark: {
      data: '故事电影',
      size: 120
    },
    pageNumber: {
      format: '第{pageNo}页/共{pageCount}页'
    },
    placeholder: {
      data: '请输入内容'
    },
    maskMargin: [80, 0, 30, 0], // 菜单栏高度60，底部工具栏30为遮盖层
  })
  // 使用插件
  editor.use(barcode1DPlugin)
  editor.use(barcode2DPlugin)
  editor.use(codeblockPlugin)
  editor.use(docxPlugin)
  editor.use(floatingToolbarPlugin)

  // 初始化菜单
  initMenu(editor);
  // 初始化页脚
  initFooter(editor);
  // 注册监听光标变化
  editor.eventBus.on('rangeStyleChange', handleRangeStyleChange)
  // 注册页面内容变化
  editor.eventBus.on('contentChange', handleContentChange)
  // 注册页数发生变化
  editor.eventBus.on('pageSizeChange', (pageNo) => {
    footerData.totalPage = pageNo;
  })
  // 注册当前页
  editor.eventBus.on('mousemove', handleMouseMove)
  editorInstance.value = editor
}

// 监听鼠标移动
const handleMouseMove = debounce((e) => {
  const positionContext = editorInstance.value.command.getPositionContextByEvent(e)
  footerData.visiblePage = positionContext ? positionContext.pageNo + 1 : 1;
}, 200)

// 监听光标变化
const handleRangeStyleChange = debounce((result) => {

  if (result.type === 'text') {
    const res = editorInstance.value.command.getCursorPosition();
    footerData.row = res.rowNo ? res.rowNo + 1 : 1;
    const content = editorInstance.value.command.getRangeRow();
    if (typeof content[0] === 'object') {
      const index = content[0].value ? content[0].value.indexOf(res.value) : 0;
      footerData.col = index + 1;
    } else {
      footerData.col = 1;
    }
  }
}, 200); // 200ms延迟

// 监听页面内容变化
const handleContentChange = debounce(() => {
  editorInstance.value.command.getWordCount().then((res) => {
    footerData.wordCount = res;
  });
}, 200);

// 创建一个防抖函数
function debounce(func, delay) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

onMounted(() => {
  initEditor();
  document.addEventListener('click', handleClickOutside)
})
onBeforeUnmount(() => {
  document.removeEventListener('click', handleClickOutside)
})
</script>
<style scoped lang="less">
.container {
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 100%;
  background: #f6f7fa;
}

.menu {
  display: flex;
  gap: 0;
  width: 95%;
  margin: 2px 0 24px 0;
  justify-content: center;
  flex-wrap: wrap;
  background: #fff;
  box-shadow: 0 4px 12px #6366f122;
  padding: 60px 32px 10px 18px;

}

.menu-group {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: 18px;
  border-right: 1.5px solid #ececff;
  padding-right: 14px;
}

.menu-group:last-child {
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}

.toolbar-btn {
  background: none;
  border: none;
  border-radius: 6px;
  color: #232946;
  font-size: 15px;
  padding: 4px 7px;
  margin: 0 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, color 0.18s;
  cursor: pointer;
  height: 32px;
  min-width: 32px;
}

.toolbar-btn[data-tooltip]:hover::after {
  opacity: 1;
}

.toolbar-btn[data-tooltip] {
  position: relative;
}

.toolbar-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  background: #fff;
  color: #222;
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 16px 0 #23294618, 0 1.5px 4px 0 #2329460a;
  opacity: 0;
  pointer-events: none;
  z-index: 99999;
  font-weight: 400;
  border: none;
  text-align: left;
  line-height: 1.5;
  letter-spacing: 0.01em;
  transition: opacity 0.18s;
}

.font-selector, .size-selector {
  min-width: 90px;
  color: #232946;
  background: #fff;
  border: 1.5px solid #ececff;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 15px;
  height: 32px;
  margin: 0 6px;
  outline: none;
  box-shadow: none;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.font-selector:hover, .size-selector:hover,
.font-selector:focus, .size-selector:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px #6366f133;
}

.font-selector optgroup {
  color: #aaa;
  font-size: 13px;
  font-style: normal;
  font-weight: bold;
  padding: 4px 0 2px 8px;
}

.font-selector option {
  padding: 6px 12px;
  font-size: 15px;
  background: #fff;
  color: #232946;
}

.font-selector option[disabled] {
  color: #aaa;
}

.font-selector option.font-songti {
  font-family: '宋体', SimSun, serif;
}

.font-selector option.font-heiti {
  font-family: '黑体', SimHei, sans-serif;
}

.font-selector option.font-kaiti {
  font-family: '楷体', KaiTi, serif;
}

.font-selector option.font-yahei {
  font-family: '微软雅黑', 'Microsoft YaHei', sans-serif;
}

.font-selector option.font-arial {
  font-family: Arial, sans-serif;
}

.font-selector option.font-times {
  font-family: 'Times New Roman', Times, serif;
}

.font-selector option.font-verdana {
  font-family: Verdana, Geneva, sans-serif;
}

.font-selector option.font-warning {
  color: #e53935;
  font-weight: bold;
}

.font-selector:focus {
  outline: 1px solid #6366f1;
}

.font-selector::-webkit-scrollbar {
  width: 8px;
  background: #f7f8fa;
}

.font-selector option:hover, .font-selector option:checked {
  background: #ececff;
  color: #6366f1;
}

.size-selector optgroup {
  color: #aaa;
  font-size: 13px;
  font-style: normal;
  font-weight: bold;
  padding: 4px 0 2px 8px;
}

.size-selector option {
  padding: 6px 12px;
  background: #fff;
  color: #232946;
}

.size-selector:focus {
  outline: 1px solid #6366f1;
}

.size-selector::-webkit-scrollbar {
  width: 8px;
  background: #f7f8fa;
}

.size-selector option:hover, .size-selector option:checked {
  background: #ececff;
  color: #6366f1;
}

.editor {
  background: #f6f7fa;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-bar {
  width: 90%;
  position: fixed;
  bottom: 0;
  background: #fff;
  box-shadow: 0 2px 12px #6366f122;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #888;
  padding: 0 18px;
  min-height: 32px;
  z-index: 100;
  border-radius: 8px 8px 0 0;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #444;
  letter-spacing: 0.5px;
}

.footer-center {
  font-size: 13px;
  color: #888;
  text-align: center;
  flex: 1;
}

.footer-right {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
}

.zoom-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}

.zoom-controls .footer-btn,
.zoom-controls span {
  height: 32px;
  line-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.footer-btn {
  background: none;
  border: none;
  border-radius: 5px;
  padding: 2px 4px;
  margin: 0 1px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}

.footer-btn:hover {
  background: #ececff;
}

.footer-btn[data-tooltip]:hover::after {
  opacity: 1;
}

.footer-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  background: #fff;
  color: #222;
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 16px 0 #23294618, 0 1.5px 4px 0 #2329460a;
  opacity: 0;
  pointer-events: none;
  z-index: 99999;
  font-weight: 400;
  border: none;
  text-align: left;
  line-height: 1.5;
  letter-spacing: 0.01em;
  transition: opacity 0.18s;
}

.footer-select {
  min-width: 70px;
  color: #232946;
  background: #fff;
  border: 1.5px solid #ececff;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 14px;
  height: 28px;
  margin: 0 6px;
  outline: none;
  box-shadow: none;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s;
  vertical-align: middle;
}

.footer-select:hover, .footer-select:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px #6366f133;
}

.footer-dropdown-wrap {
  position: relative;
  display: inline-block;
}

.footer-dropdown-menu {
  position: absolute;
  left: 0;
  bottom: 120%;
  min-width: 80px;
  background: #fff;
  border-radius: 7px;
  box-shadow: 0 4px 16px #23294618;
  border: 1.5px solid #ececff;
  z-index: 99999;
  padding: 4px 0;
  font-size: 14px;
  color: #232946;
  user-select: none;
}

.footer-dropdown-item {
  padding: 7px 18px 7px 18px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.footer-dropdown-item:hover, .footer-dropdown-item.active {
  background: #ececff;
  color: #6366f1;
}
</style>